<template>
  <div>
<!--    <el-row>-->
<!--      <el-col :span="8">-->
<!--        <div class="grid-content bg-purple">-->
<!--          <span class="labClass">用户名:</span>-->
<!--          <el-input v-model="userName" placeholder="请输入内容"></el-input>-->
<!--        </div>-->
<!--      </el-col><br>-->
<!--      <el-col :span="8">-->
<!--        <div class="grid-content bg-purple-light">-->
<!--          <span class="labClass">密码:</span>-->
<!--          <el-input placeholder="请输入密码" v-model="userPwd" show-password></el-input>-->
<!--        </div>-->
<!--      </el-col><br>-->
<!--      <el-col :span="8">-->
<!--        <div class="grid-content bg-purple">-->
<!--          <el-button>登录</el-button>-->
<!--        </div>-->
<!--      </el-col>-->
<!--    </el-row>-->
    <el-card class="box-card">
      <el-row>
        <el-col :span="5"  class="labClass"><div class="grid-content bg-purple">
          <span>用户名:</span>
        </div></el-col>
        <el-col :span="16"><div class="grid-content bg-purple-light">
          <el-input v-model="userName" placeholder="用户名"></el-input>
        </div></el-col>
        <el-col :span="3" class="labClass"><div class="grid-content bg-purple">
          *
        </div></el-col>
      </el-row>

      <p/>
      <el-row>
        <el-col :span="5"  class="labClass"><div class="grid-content bg-purple">
          <span>用户密码:</span>
        </div></el-col>
        <el-col :span="16"><div class="grid-content bg-purple-light">
          <el-input v-model="password" type="password" placeholder="用户密码"></el-input>
        </div></el-col>
        <el-col :span="3" class="labClass"><div class="grid-content bg-purple">
          *
        </div></el-col>
      </el-row>
      <p/>
      <el-button type="success" @click="login">登录</el-button>
    </el-card>

  </div>
</template>

<script>
export default {
  name: "Login"
  , data() {
    return {
      userName:'',
      password:''
    }
  },
  methods: {
    login() {
      if (this.userName=='zhangsan' && this.password=='123456'){
        this.$router.push("index")
      }else {
        this.$message.error("用户名或密码错误")
      }
    }
  }
}
</script>

<style scoped>
.labClass{
  margin-top: 10px;
}
.box-card{
  margin-top: 10%;
  margin-left: 30%;
  margin-right: 30%;
}
</style>
